import React from 'react';
import { SearchBar } from 'antd-mobile';
import './SearchBox.css'

export default class SearchBox extends React.Component {
    state = {
        value: '',
        style: 'none',
    }

    onChange= (value) => {
        this.setState({ value });
    }

    clear = () => {
        this.setState({ value: '' });
    }

    render() {
        return (
            <div>
                <div className="searchBoxContainer">
                    <SearchBar
                        value={this.state.value}
                        placeholder="查找地点"
                        onSubmit={this.props.search}
                        onClear={this.props.clearSearch}
                        onFocus={() => this.setState({
                            style: 'block'
                        })}
                        onBlur={() => this.setState({
                            style: 'none'
                        })}
                        onChange={this.onChange}
                    />
                </div>
                <div className="mask" style={{ display: this.state.style }}></div>
            </div>
        );
    }
}